<template>
	<view>
		<view style="font-weight: 700;">身份证智能识别</view>
		<view class="dev">真实姓名<input type="text" placeholder="请输入姓名" v-model="name"></view>
		<view class="">
			 <picker @change="bindPicker" :value="sex" :range="arr">
			    <view class="picker">
			      性别：{{sex}}
			    </view>
			  </picker>
		</view>
		
		
		 <view class="dev"> <picker mode="date" value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChangeheardle">
		    <view class="picker">
		      出生日期: {{date}}
		    </view>
		  </picker></view>
		  <view class="">
		  	<picker @change="bindPickers" :value="relation" :range="arr1">
		  	   <view class="picker">
		  	     成员关系：{{relation}}
		  	   </view>
		  	 </picker>
		  </view>
		<view class="dev">身份证<input type="text" placeholder="请输入身份证" v-model="id_card"></view>
		<view class="dev">手机号<input type="text" placeholder="请输入手机号" v-model="phone"></view>
		<button  @click="submit">提交</button>
	</view>
</template>

<script>
	import {runlist} from "../utils/api"
	export default {
		data() {
			return {
				arr:['男','女'],
				arr1:['兄弟','姐妹','爸爸','妈妈'],
				name:'',//姓名
				date:'请选择出生日期',//出生日期
				relation:'请选择与成员关系',//成员关系
				id_card:'',//身份证
				phone:'',//手机号
				sex:"请选择性别",//性别
			}
		},
		methods: {
			bindPicker(e){//性别
				console.log('40',e);
			this.sex=this.arr[e.detail.value]
			},
			bindPickers(e){//成员关系
				console.log(e);
				this.relation=this.arr1[e.detail.value]
				
			},
			bindDateChangeheardle(e){//出生日期
				console.log(e);
				this.date=e.detail.value
			},
			// 提交
			submit(){
				let list={name:this.name,sex:this.sex,born:this.date,relation:this.relation,id_card:this.id_card,phone:this.phone}
				runlist(list).then(res=>{
					console.log(res);
					let lists= uni.getStorageSync("sick")|| []
					lists.push({...list})
					uni.setStorageSync("sick",lists),
					uni.navigateTo({
						url:'/pages/visitor/visitor'
					})
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.dev{
	display: flex;
	justify-content: space-between;
	margin: 30px 0;
}
</style>
